<template>
  <section class="con_main">
    <banner></banner>
    <section class="shop_show">
      <div class="shop_main">
        <h2>课程展示</h2>
        <section class="class_show">
          <h3>地点/星级/活动/时间</h3>
          <div class="class_banner_wrap">
              <el-carousel :interval="4000" type="card" height="440px">
                <el-carousel-item class="star7_item" v-for="item in classList" :key="item.course_id">
                  <div  @click="goToInfo('classlist',item.course_id)">
                    <img class="star7_img" :src="item.image" :alt="item.course">
                    <header>{{item.course}}</header>
                    <div class="date">{{item.date}}</div>
                    <div class="address">{{item.address}}</div>
                    <div class="description">{{item.description}}</div>
                    <div class="star7_info">
                      <div class="star">
                        <span class="el-icon-star-on" :class="{red:index<item.star}" v-for="(i,index) in 5" :key="i"></span>
                      </div>
                      <div class="price red">￥{{item.price}}</div>
                    </div>                    
                  </div>
                </el-carousel-item>
              </el-carousel>
              <div class="class_more">
                <router-link to="/classlist" tag="span">more+</router-link>
              </div>
          </div>
        </section>
        <section class="goods_show">
          <h3><img src="../assets/images/logo_goods.png" alt=""></h3>
          <!-- swiper -->
          <swiper :options="swiperOption">
            <swiper-slide class="goods_item" v-for="(item,index) in goodsList" :key="index">
              <div  @click="goToInfo('shoplist',item.sku)">
                <div class="goods_pic"><img :src="item.image" :alt="item.product"></div>
                <div class="goods_title">{{item.product}}</div>
                <div class="goods_info">{{item.specialty}}</div>
                <div class="goods_price"><span>￥</span>{{item.price}}</div>                
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
          <div class="class_more">
            <router-link to="/shoplist" tag="span">more+</router-link>
          </div>
        </section>
      </div>
    </section>
    <section class="advantage">
      <header></header>
      <div class="advantage_wrap">
        <section class="advantage_item">
          <div class="head">
            <div class="ioc"><span class="ioc1 ioc_pic"></span></div>
            <div class="title">线上选课线下授课</div>
          </div>
          <p>睿那体育与传统互联网营销模式不同，采用线上选课，线下授课，解决了在线上上课看不懂听不懂的问题</p>
        </section>
        <section class="advantage_item">
          <div class="head">
            <div class="ioc"><span class="ioc2 ioc_pic"></span></div>
            <div class="title">不同班次多种选择</div>
          </div>
          <p>睿那体育与传统互联网营销模式不同，采用线上选课，线下授课，解决了在线上上课看不懂听不懂的问题</p>
        </section>
        <section class="advantage_item">
          <div class="head">
            <div class="ioc"><span class="ioc3 ioc_pic"></span></div>
            <div class="title">极速发货准时到达</div>
          </div>
          <p>睿那体育与传统互联网营销模式不同，采用线上选课，线下授课，解决了在线上上课看不懂听不懂的问题</p>
        </section>
        <section class="advantage_item">
          <div class="head">
            <div class="ioc"><span class="ioc4 ioc_pic"></span></div>
            <div class="title">质量保证全部正品</div>
          </div>
          <p>睿那体育与传统互联网营销模式不同，采用线上选课，线下授课，解决了在线上上课看不懂听不懂的问题</p>
        </section>
      </div>
    </section>
  </section>
</template>
<script>
import goods from '../components/goods'
import banner from '../components/banner'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name:'homeCont',
  data(){
    return{
      classList:[],
      goodsList:[],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  components:{
    swiper,
    swiperSlide,
    banner
  },
  mounted(){
    this.GLOBAL.request({
      method:"post",
      baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
      url:"courses/show",
    }).then(({data:data})=>{
      if(data){
        this.classList = data.data
      }
    })
    this.GLOBAL.request({
      method:'post',
      baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
      url:"goods/show",
    }).then(({data:data})=>{
      if(data){
        this.goodsList = data.data.splice(0,5)
      }
    })
  },
  methods:{
    goToInfo(tag,id){
      //console.log(id);
      this.$router.push({ path:'shopInfo',query:{tag,id} })
      // this.$router.push({ path:'shopInfo',query:{id} })
    }
  }
}
</script>
<style scoped>
.banner_img{
  width:100%;
  height:100%;
}
.shop_show{
  min-height:1338px;
  background:url('../assets/images/background.png') no-repeat 0 45px;
}
.shop_main{
  width:1200px;
  margin:0 auto;
}
.shop_main h2{
  font:24px/90px "宋体";
  font-weight: bold;
  color:#0078c5;
}
.class_show{
  height:670px;
}
.class_show h3{
  font:18px/92px "微软雅黑";
  color:#b0b0b0;
  text-align: center;
}
.class_banner_wrap{
  width:1200px;
  height:440px;
  position: relative;
}
.star7_item{
  border:1px solid #0078c5;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 1px 5px 10px rgba(0, 0, 0, .4);
}
.star7_img{
  height:243px;
  width:100%;
  margin-bottom: 9px;
}
.star7_item header{
  color:#666;
  font:18px/34px "微软雅黑";
}
.star7_item .date, .description{
  color:#a1a1a1;
  font:14px/30px "微软雅黑"
}
.star7_item .address{
  color:#a1a1a1;
  font:14px/20px "微软雅黑"
}
.star7_info{
  display: flex;
  padding: 0 30px;
  font-size: 38px;
  justify-content: space-between;
}
.el-icon-star-on{
  color:#ebebeb
}
.red{
  color:#ff0101;
}
.class_more{
  margin:40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.class_more span{
  width:88px;
  height:25px;
  color:#0078c5;
  text-align: center;
  line-height: 22px;
  box-sizing: border-box;
  border: 1px solid #0078c5;
  border-radius: 15px;
  cursor: pointer;
}
.goods_show h3{
  width:214px;
  height:50px;
  margin:0 auto 36px;
}
.goods_item{
  /* width:370px !important; */
  height:385px;
  padding:30px;
  box-sizing: border-box;
  border:1px solid #0078c5;
  border-radius: 16px;
  text-align: center;
}
.goods_pic{
  width:302px;
  height:232px;
}
.goods_pic img{
  height: 100%;
}
.goods_title{
  font: 20px/36px "微软雅黑";
  font-weight: bold;
  color:#333;
}
.goods_info{
  font: 16px/26px "微软雅黑";
  color:#666;
}
.goods_price{
  font:20px/24px "微软雅黑";
  color:#ee7922;
}
.goods_price span{
  font-size:22px;
}
/* 优势 */
.advantage{
  width:1200px;
  margin:0 auto;
}
.advantage header{
  height:70px;
  margin-bottom: 48px;
  background: url('../assets/images/advantage.png') no-repeat;
}
.advantage_wrap{
  display: flex;
  justify-content: space-between;
  margin-bottom: 84px;
}
.advantage_item{
  width:258px;
  border:1px solid #0078c5;
  border-radius: 15px;
  padding: 30px 24px 30px 7px;
  box-sizing: border-box;
  transition: 1s;
}
.advantage_item:hover{
  transform: translateY(-10px)
}
.advantage_item .head{
  height:58px;
  margin-bottom: 30px;
  display: flex;
  font:24px/29px "微软雅黑";
}
.advantage_item .ioc{
  width:99px;
  height:58px;
}
.ioc_pic{
  width:53px;
  height:54px;
  display: inline-block;
  margin-left:10px;
  background: url('../assets/images/advantage_ioc.png');
}
.ioc2{
  width:61px;
  background-position: -53px;
}
.ioc3{
  width:40px;
  background-position: -114px;
}
.ioc4{
  width:51px;
  background-position: -154px;
}
.advantage_item .title{
  width:128px;
  padding: 0 16px;
  color:#999;
}
.advantage_item p{
  color:#bfbfbf;
  text-indent: 20px;
  font:14px/24px "微软雅黑"
}
</style>

